<template>
	<div class="shequ-box">
		<div class="shequ-title">
			<ul class="shequ-title-left">
				<li>
					<a href="/" style="color: #000;">首页 </a>
				</li>
				<li>></li>
				<router-link to="/Shequ">
					<li style="color: #000;">社区</li>
				</router-link>
				<li>></li>
				<li>我和美食恋爱了</li>
			</ul>
			<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/menu.png" />
		</div>
		<div class="shequ-centent" style="margin-top: .8rem;">
			<div class="shequ-centent-top">
				<img src="http://img.szzhangchu.com/1502276901156_1459219964.jpg" style="width: 100%;" />
				<div class="shequ-centent-top-text">
					<img src="http://img.szzhangchu.com/IMG_20170808_120722.jpg" style="width: 1rem;height: 1rem; border-radius: 50%;" />
					<div class="shequ-xinxi">
						<p>150*1389</p>
						<p style="color: #666;">刚刚</p>
					</div>
				</div>
				<div class="sq-zan">
					<p style="margin-top: .4rem;">
						<span style="margin-left: .1rem;">15</span>人觉得很赞

					</p>
					<ul class="sq-touxiang">
						<li><img src="http://img.szzhangchu.com/IMG_20151104_201732.jpg" /></li>
						<li><img src="http://img.szzhangchu.com/1446715086391_0582454869.jpg" /></li>
						<li><img src="http://img.szzhangchu.com/IMG_20151105_095520.jpg" /></li>
						<li><img src="http://wx.qlogo.cn/mmopen/Yibzo33AC8rpMejxkmcGiaDwj9ianxPMJK0U5GS8icKORAoSVnsibwCaMCxjnXffY4l0bKX0YnSUiaJbiaOTr1UJWjVQAdr2eWWzOlf/0" /></li>
						<li><img src="http://q.qlogo.cn/qqapp/100956582/49BFC5FB7D54BA2B161AACDC9B1893C0/100" /></li>
						<li><img src="http://img.szzhangchu.com/1451987330268_8284154985.jpg" /></li>
						<li><img src="http://tp3.sinaimg.cn/2141749110/180/5727158960/0" /></li>
						<li></li>
					</ul>
					<div class="sq-genduo">
						<p style="line-height: .8rem;">更多<span style="color:#ff8f5c;">我和美食恋爱了</span>的作品</p>
						<ul class="gengduo-img">
							<li><img src="http://img.szzhangchu.com/1502276901156_1459219964.jpg@174h_174w_1e_1c.jpg" /></li>
							<li><img src="http://img.szzhangchu.com/1502255980273_2399238114.jpg@174h_174w_1e_1c.jpg" /></li>
							<li><img src="http://img.szzhangchu.com/1502193886773_4316375471.jpg@174h_174w_1e_1c.jpg" /></li>
							<li><img src="http://img.szzhangchu.com/1502186616960_5321282433.jpg@174h_174w_1e_1c.jpg" /></li>
							<li><img src="http://img.szzhangchu.com/1502186580678_3770453395.jpg@174h_174w_1e_1c.jpg" /></li>
							<li><img src="http://img.szzhangchu.com/1502109097388_623154573.jpg@174h_174w_1e_1c.jpg" /></li>
							<li><img src="http://img.szzhangchu.com/1502067895463_642826110.jpg@174h_174w_1e_1c.jpg" /></li>
							<li><img src="http://img.szzhangchu.com/1502021286644_6495069372.jpg@174h_174w_1e_1c.jpg" /></li>
							<li><img src="http://img.szzhangchu.com/1502002901852_0147538499.jpg@174h_174w_1e_1c.jpg" /></li>
							<li><img src="http://img.szzhangchu.com/1501945142490_7571752862.jpg@174h_174w_1e_1c.jpg" /></li>
							<li><img src="http://img.szzhangchu.com/1501943405197_8112025813.jpg@174h_174w_1e_1c.jpg" /></li>
						</ul>
					</div>
					<div class="sq-dianp" style="margin-top: .3rem;border-top: .02rem solid #ddd;color: #5D5D5D;">
						<p style="line-height: .7rem;">{{ PinLsz.length }}条点评</p>
						<p style="color: #fff;background: #ff8f5c;width: 90%;height:.5rem;line-height:.5rem;border-radius: .1rem;text-align: center;" @click="pinglun">我也来说两句</p>
					</div>
					<div class="footer-gap" v-if="iPsShow">

					</div>
					<div class="Pls-box">
						<ul class="Pl-box">
							<li v-for="pinLsz in PinLsz">
								<p class="Pl-box-left">
									<span style="color: cornflowerblue;">lureny</span>
									<span>{{ pinLsz.centent }}</span>
								</p>
								<p style="color: palevioletred;">
									刚刚
								</p>
							</li>
						</ul>
					</div>
					<div v-if="iPsShow" class="pinglun"><input type="text" class="Pl-centent" /><span @click="Plfas">发送</span></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				iPsShow: false,
				PinLsz: [],
				PinLdx: {
					centent: "",
					time: ""
				}
			}
		},
		methods: {
			pinglun: function() {
				this.iPsShow = true;
			},
			Plfas: function() {
				if(this.$store.state.loginstate == true) {
					var timestamp = Date.parse(new Date());
					var tt = new Date(parseInt(timestamp)).toLocaleString();
					tt = tt.substring(9, tt.Length - 1).replace(/年|月/g, "-").replace(/日/g, " ");
					this.PinLdx.centent = $(".Pl-centent")[0].value;
					this.PinLdx.time = tt;
					this.PinLsz.push(this.PinLdx);
					this.iPsShow = false;
					console.log(this.PinLsz);
				} else {
					alert("请先登录");
					console.log(this.$store.state.loginstate);
					this.$router.push({
						path: '/Login'
					})
				}

			}
		}
	}
</script>

<style>
	.shequ-box {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #fff;
		overflow-y: scroll;
	}
	
	.shequ-title {
		width: 100%;
		display: flex;
		background: #fff;
		color: #333;
		justify-content: space-between;
		position: fixed;
		z-index: 99;
	}
	
	.shequ-title-left {
		display: flex;
		color: #333;
		padding-left: 0.2rem;
		font-size: .3rem;
		height: .8rem;
		line-height: .8rem;
		width: 85%;
	}
	
	.shequ-title img {
		width: .6rem;
		height: .6rem;
		margin-top: .1rem;
	}
	
	.shequ-centent-top-text {
		display: flex;
		margin-top: .5rem;
		margin-left: .3rem;
		background: #fff;
	}
	
	.shequ-xinxi {
		line-height: .5rem;
		margin-left: .2rem;
	}
	
	.sq-zan {
		margin-top: .5rem;
		padding-left: .2rem;
		border-top: .03rem solid #ddd;
	}
	
	.sq-touxiang {
		margin-top: .4rem;
		display: flex;
	}
	
	.sq-touxiang img {
		width: .6rem;
		height: .6rem;
		margin-left: .1rem;
		border-radius: 50%;
	}
	
	.gengduo-img {
		overflow-x: scroll;
		width: 100%;
		display: flex;
	}
	
	.gengduo-img::-webkit-scrollbar {
		width: 0px;
		height: 1px;
	}
	
	.gengduo-img img {
		width: 1.7rem;
		margin-left: .05rem;
	}
	
	.footer-gap {
		height: 1.3rem;
	}
	
	.pinglun {
		position: fixed;
		z-index: 10000;
		bottom: 0;
		left: 0;
		background-color: #ccc;
		padding: 0.2rem 0.1rem;
		width: 100%;
	}
	
	.pinglun input {
		color: #464646;
		font-family: 'Microsoft Yahei', Tahoma, Helvetica, Arial, sans-serif， Helvetica Neue, Helvetica, Arial, sans-serif;
		width: 70%;
		height: .6rem;
		line-height: .6rem;
		border: 0;
		-webkit-appearance: none;
		padding: 0 .03rem;
		border-radius: 6px;
		font-size: .3rem;
	}
	
	.pinglun span {
		position: absolute;
		display: block;
		right: 0;
		top: 0;
		height: .6rem;
		line-height: .6rem;
		padding: 0 0.6rem;
		margin-top: .2rem;
		margin-right: .2rem;
		background-color: #ff8f5c;
		border-radius: 4px;
		color: #fff;
	}
	
	.Pl-box li {
		display: flex;
		justify-content: space-between;
		margin-top: .3rem;
	}
	
	.Pl-box-left {
		display: flex;
		flex-direction: column;
		margin-bottom: .1rem;
	}
</style>